<template>
  <div class="content-container">
    <div class="panel">
      <img class="system-logo-icon" src="@/assets/logo.png"></img>
      <div class="menu-bar">
        <div class="menu" :style="{backgroundColor:policyType.value==item.value?'#e6a23c':'rgba(0,41,109,0.3)'} " @click="clickM(item)" v-for="(item,index) in policyTypeList" :key="index" >
        <div class="title">{{item.name}}</div></div>
      </div>
      <div class="content-list">
         <div class="content-item"  @click="$router.push({path:'/policy-detail',query:{zcxh00:item.zcxh00}})" :key="index" v-for="(item,index) in policyData">
<!--           <img class="brace-left" src="@/assets/zb.png"/>-->
           <div class="title">
             <div class="title-desc">{{item.zcbt00}}</div>
             <div class="title-date">{{item.zcsjsj.substring(0,10)}}</div>
           </div>
<!--           <img class="brace-right" src="@/assets/yb.png"/>-->
         </div>
        <empty-data-panel v-if="policyData.length==0" msg="暂未发布相关信息"></empty-data-panel>
      </div>


    </div>

  </div>
</template>
<script>


import ReturnBtn from "@/views/components/ReturnBtn.vue";
import {policyApi} from "@/api";

export default {
  name:"policy",
  components:{
    ReturnBtn
  },
  data(){
    return {
      policyTypeList: [
        {
          name: "就业政策",
          value: "2",
          icon: "employ"
        },
          {
        name: "零工政策",
        value: "1",
        icon: "linggong"
      },{
        name: "创业政策",
        value: "3",
        icon: "business"
      },{
        name: "培训政策",
        value: "4",
        icon: "train"
      },{
          name: "劳动维权",
          value: "6",
          icon: "other"
        },{
        name: "其他政策",
        value: "5",
        icon: "other"
      }],
      queryPolicyParam:{
        page:1,
        limit:10
      },
      queryNewsParam:{
        page:1,
        limit:10
      },
      policyData:[
      ],
      policyType:   {
        name: "就业政策",
        value: "2",
        icon: "employ"
      },
    }
  },
  created() {
    this.queryPolicy()
  },
  methods:{
    clickM(item){
      this.policyType=item
      this.queryPolicy()
    },
    queryPolicy(){
      this.policyData=[]
      policyApi.queryPolicy({zclx00:this.policyType.value,page:this.queryPolicyParam.page,limit: this.queryPolicyParam.limit}).then((res) => {
        this.policyData = res.data.records
      }).catch(()=>{

      })
    }
  }
}
</script>

<style lang="scss" scoped>
.panel{

  width: 100%;
  height: 100%;
   .menu-bar{
     display: flex;
     height: 64px;
     width: 70%;
     margin: 40px auto 0 auto;
     justify-content: space-between;
     .menu{
       cursor: pointer;
      //  margin-right: 150px;
       width: 180px;
       height: 63px;
       line-height: 20px;
       border-radius: 16px;
       background-color: rgba(0,41,109,0.3);
       color: rgba(16,16,16,1);
       text-align: center;
       font-family: Roboto;
      //  border: 1px solid rgba(187,187,187,1);
       .title{
         margin-top: 20px;
         font-size: 26px;
         color: white;
       }

     }
   }
  .content-list{
    min-height: 600px;
    width: 70%;
    margin: 30px auto 2px auto;
    border-radius: 12px;
    border: 1px solid rgb(209, 207, 207);
    .content-item{
      cursor: pointer;
      border-radius: 4px;
      height: 50px;
      width: 100%;
      margin: 20px auto auto auto;
      // background-color: white;
      display: flex;
      .brace-left{
        width: 20px;
        height: 54px;
        margin-top: -2px;
        margin-left: -3px;
      }
      .title{
        flex: 1;
        height: 100%;
        display: flex;
        border-bottom: 1px solid rgb(0, 148, 247);
        .title-desc{
          padding-left: 30px;
          font-size: 22px;
          line-height: 50px;
          height: 100%;
          color: rgb(246, 242, 242);
          flex: 1;
          text-align: left;
        }
        .title-date{
          line-height: 50px;
          font-size: 22px;
          width: 200px;
          height: 100%;
          color: rgb(246, 242, 242);
        }
      }
      .brace-right{
        width: 20px;
        height: 54px;
        margin-top: -2px;
        margin-right: -3px;
      }

    }
  }
}
</style>
